import React,{useState,useEffect,useLayoutEffect} from 'react';
import {
    StyleSheet,
    StatusBar,
    View,
    ScrollView,
    FlatList,
    Text,
    Image,
    TouchableOpacity,
    Share
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { AntDesign,Ionicons,SimpleLineIcons } from '@expo/vector-icons';
import '../features/Phone';

const Perfume = ({route,navigation}) => {
    const info = route.params.item;
    const named = (info.nose_name).match(/[\u4E00-\u9FFF·\s]+/).toString();
    const [userId,setUserId] = useState('');
    const [color,setColor] = useState('#696969');
    const [txtshow,setTxtshow] = useState('false');
    const [list,setList] = useState('false');
    const [listshow,setListshow] = useState({display:'none'});
    const [data,setData] = useState([]);

    const getTopic = () => {
        fetch('http://175.27.190.73:9000/noseTalk', {
            method: 'POST',
            headers: new Headers({
                'Content-Type': 'application/json'
            }),
            body: JSON.stringify({noseId: info.nose_id})
        })
            .then(res => res.json())
            .then(res => {
                if(res != '暂无评论！') {
                    setData(res);
                }
            })
    };

    const getId = () => {
        AsyncStorage.getItem('user')
            .then(res=>{
                setUserId(JSON.parse(res).user_id);
            })
    };

    const getCollect = () => {
        fetch('http://175.27.190.73:9000/infoCollect', {
            method: 'POST',
            headers: new Headers({
                'Content-Type': 'application/json'
            }),
            body: JSON.stringify({userId:userId, noseId:info.nose_id})
        })
            .then(res => res.json())
            .then(res => {
                if(res == true) {
                    setColor('red');
                } else if(res == false) {
                    setColor('#696969');
                }
            })
    };

    const postCollect = () => {
        fetch('http://175.27.190.73:9000/collection', {
            method: 'POST',
            headers: new Headers({
                'Content-Type': 'application/json'
            }),
            body: JSON.stringify({userId:userId, noseId:info.nose_id})
        })
            .then(res => res.json())
            .then(res => {
                console.log(res);
            })
    };

    const delCollect = () => {
        fetch('http://175.27.190.73:9000/delCollect', {
            method: 'POST',
            headers: new Headers({
                'Content-Type': 'application/json'
            }),
            body: JSON.stringify({userId:userId, noseId:info.nose_id})
        })
            .then(res => res.json())
            .then(res => {
                console.log(res);
            })
    };

    const share = async ()=>{
        const result = await Share.share(
            {message: 'https://www.nosetime.com'},
            {dialogTitle: '标题'}
        )
    }

    useEffect(()=>{
        getTopic();
        getId();
    },[]);
    useEffect(()=>{
        if(userId != '') {
            getCollect();
        }
    },[userId]);
    

    return (
        <View>
            <ScrollView style={{width:w, height:h, backgroundColor:'#f0f0f0'}}>
                {/* 透明状态栏 */}
                <StatusBar backgroundColor={'transparent'} translucent={true} />

                {/* 导航栏 */}
                <View style={{
                    width: w,
                    height: h/11,
                    padding: 10,
                    paddingTop: 30,
                    backgroundColor: 'white',
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                }}>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.goBack()}}
                    >
                        <Ionicons name="chevron-back" size={30} color="black" />
                    </TouchableOpacity>
                    <View>
                        <Text style={{fontSize:20, fontWeight:'bold', color:'black'}}>{named}</Text>
                    </View>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{
                            if(list == 'false') {
                                setList('true');
                                setListshow({position:'absolute', display:'flex'})
                            } else {
                                setList('false');
                                setListshow({display:'none'});
                            }
                        }}
                    >
                        <AntDesign name="bars" size={28} color="black" />
                    </TouchableOpacity>
                </View>

                {/* 香水信息 */}
                <View
                    style={{
                        width: w,
                        paddingTop: 10,
                        flexDirection: 'row'
                    }}
                >
                    <View style={{width:p2d(320), height:p2d(512), backgroundColor:'white'}}>
                        <Image
                            source={{uri:info.nose_logo}}
                            style={{width:p2d(200), height:p2d(300), position:'absolute', top:60, alignSelf:'center'}} 
                        />
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{
                                if(color == '#696969') {
                                    setColor('red');
                                    postCollect();
                                } else if(color == 'red') {
                                    setColor('#696969');
                                    delCollect();
                                }
                            }}
                            style={{
                                position:'absolute',
                                bottom: 8,
                                right: 10
                            }}
                        >
                            <Ionicons name="heart-outline" size={30} color={color} />
                        </TouchableOpacity>
                    </View>
                    <View
                        style={{
                            width: w-p2d(320),
                            height:p2d(512),
                            paddingTop: 6,
                            paddingLeft: 16,
                            paddingRight: 10,
                            justifyContent: 'center',
                        }}
                    >
                        <Text style={styles.txt1}>
                            名称：<Text style={styles.txt2}>{info.nose_name}</Text>
                        </Text>
                        <Text style={styles.txt1}>评分：<Text style={styles.txt2}>{info.nose_score}分 {info.nose_num}人评分</Text></Text>
                        <Text style={styles.txt1}>品牌：<Text style={styles.txt2}>{info.nose_brand}</Text></Text>
                        <Text style={styles.txt1}>香调：<Text style={styles.txt2}>{info.nose_flavor}</Text></Text>
                        <Text style={styles.txt1}>前调：<Text style={styles.txt2}>{info.nose_topTone}</Text></Text>
                        <Text style={styles.txt1}>中调：<Text style={styles.txt2}>{info.nose_middleTone}</Text></Text>
                        <Text style={styles.txt1}>后调：<Text style={styles.txt2}>{info.nose_afterTone}</Text></Text>
                        <Text style={styles.txt1}>属性：<Text style={styles.txt2}>{info.nose_attribute}</Text></Text>
                        <Text style={styles.txt1}>调香师：<Text style={styles.txt2}>{info.nose_perfumer}</Text></Text>
                        <Text style={styles.txt1}>
                            标签：<Text style={styles.txt2}>{info.nose_label}</Text>
                        </Text>
                    </View>
                </View>

                {/* 香水简介 */}
                <View>
                    <Text style={styles.txt3}>香水简介</Text>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{
                            if(txtshow == 'false') {
                                setTxtshow('true');
                            } else {
                                setTxtshow('false');
                            }
                        }}
                    >
                        {
                            txtshow == 'false' ?
                            <Text
                                numberOfLines={9}
                                ellipsizeMode='tail'
                                style={{fontSize:13, lineHeight:20, color:'#696969', padding:10, paddingTop:0}}
                            >
                                {info.nose_introduction}
                            </Text> :
                            <Text style={{fontSize:13, lineHeight:20, color:'#696969', padding:10, paddingTop:0}}>
                                {info.nose_introduction}
                            </Text>
                        }
                    </TouchableOpacity>
                </View>

                {/* 香水评论 */}
                <View>
                    <View 
                        style={{
                            flexDirection:"row", justifyContent:'space-between', alignItems:'center',
                            borderBottomWidth:1, borderColor:'lightgray'
                        }}
                    >
                        <Text style={styles.txt3}>香水评论</Text>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{
                                if(userId == '') {
                                    navigation.navigate('Login')
                                } else {
                                    navigation.navigate('Comment',{named:named, track:info.nose_id, userId:userId})
                                }
                            }}
                        >
                            <View style={styles.list}>
                                <AntDesign name="form" size={15} color="gray" />
                                <Text style={{fontSize:15, color:'gray', marginLeft:10}}>写香评</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    {
                        JSON.stringify(data) == '[]' ?
                        <View 
                            style={{
                                width:w, height:h*0.4, backgroundColor:'white',
                                justifyContent:'center', alignItems:'center'
                            }}
                        >
                            <Image 
                                source={require('../assets/error/wuping.jpg')}
                                style={{width:150, height:150, marginBottom:20}}
                            />
                            <Text style={{fontSize:16, color:'#3a55a4'}}>香评暂缺</Text>
                            <Text style={{fontSize:16, color:'#3a55a4'}}>快来写第一个香评吧！</Text>
                        </View> :
                        data.map((item)=>{
                            return (
                                <View style={{width:w, padding:10, borderBottomWidth:1, borderBottomColor:'lightgray'}}>
                                    {/* 用户 */}
                                    <View style={{flexDirection:'row', alignItems:'center', marginBottom:16}}>
                                        <Image 
                                            source={item.user_logo==null ? require('../assets/error/user.png') : {uri:item.user_logo}}
                                            style={{
                                                width:p2d(80), height:p2d(80), borderRadius:p2d(80),
                                                marginRight:16,
                                            }}
                                        />
                                        <Text style={{fontSize:16, color:'black'}}>{item.user_name}</Text>
                                    </View>
                                    {/* 评论 */}
                                    <View>
                                        <Text 
                                            style={{fontSize:15, lineHeight:24, color:'#1c1c1c'}}
                                        >
                                            {item.talk_content}
                                        </Text>
                                        <View style={{
                                            marginTop: 10,
                                            marginBottom: 10,
                                            flexDirection: 'row',
                                            justifyContent: 'space-between'
                                        }}>
                                            <View style={{
                                                width: (w-p2d(100)-20)/3.2,
                                                flexDirection: 'row',
                                                justifyContent: 'space-between'
                                            }}>
                                                <Text style={{fontSize:13, color:'#696969'}}>{item.talk_time.slice(0,10)}</Text>
                                                <TouchableOpacity
                                                    activeOpacity={0.8}
                                                    onPress={()=>{}}
                                                >
                                                    <AntDesign name='message1' size={15} color='#696969' />
                                                </TouchableOpacity>
                                            </View>
                                            <View style={{
                                                width: (w-p2d(100)-20)/5,
                                                flexDirection: 'row',
                                                justifyContent: 'space-between'
                                            }}>
                                                <View style={{flexDirection: 'row',}}>
                                                    <Text style={{fontSize:13, color:'#696969', marginRight:8}}>{item.talk_praise}</Text>
                                                    <TouchableOpacity
                                                        activeOpacity={0.8}
                                                    >
                                                        <AntDesign name='like2' size={15} color='#696969' />
                                                    </TouchableOpacity>
                                                </View>
                                                <TouchableOpacity
                                                    activeOpacity={0.8}
                                                >
                                                    <AntDesign name='dislike2' size={15} color='#696969' />
                                                </TouchableOpacity>
                                            </View>
                                        </View>
                                    </View>
                                </View>
                            )
                        })
                    }
                </View>
            </ScrollView>
            
            {/* 列表 */}
            <View 
                style={[{
                    width:w/3, top:h/11, right:8, paddingLeft:10, paddingRight:10,
                    backgroundColor:'white',
                    borderWidth:0.3, borderColor:'lightgray', borderRadius:8,
                },listshow]}
            >
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={()=>{
                        if(userId == '') {
                            navigation.navigate('Login')
                        } else {
                            navigation.navigate('Comment',{named:named, track:info.nose_id, userId:userId})
                        }
                    }}
                >
                    <View style={styles.list}>
                        <AntDesign name="form" size={16} color="black" />
                        <Text style={styles.txt5}>写香评</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={share}
                >
                    <View style={[styles.list,{borderTopWidth:1, borderColor:'lightgray'}]}>
                        <SimpleLineIcons name="share-alt" size={16} color="black" />
                        <Text style={styles.txt5}>分享</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={()=>{
                        if(userId == '') {
                            navigation.navigate('Login')
                        } else {
                            navigation.navigate('Collect');
                        }
                    }}
                >
                    <View style={[styles.list,{borderTopWidth:1, borderColor:'lightgray'}]}>
                        <Ionicons name="heart-outline" size={20} color='black' />
                        <Text style={styles.txt5}>收藏</Text>
                    </View>
                </TouchableOpacity>
            </View>
        </View>
    )
};

const styles = StyleSheet.create({
    txt1: {
        fontSize: 14,
        color: 'black',
        marginBottom: 6
    },
    txt2: {
        color: '#696969'
    },
    txt3: {
        fontSize:18,
        color:'black',
        margin:10,
        marginBottom:10
    },
    txt4: {
        fontSize: 15,
        color: 'black',
        backgroundColor: 'lightyellow',
        padding: 5,
        marginLeft: 16
    },
    list: {
        padding: 10,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    txt5: {
        fontSize: 16,
        color: 'black',
        marginLeft: 10
    }
});

export default Perfume
